import { Button, Space } from 'antd';
import React from 'react';

interface SettingsPanelProps {
  title?: string;
  children: React.ReactNode;
  onSave?: () => void;
  onCancel?: () => void;
  onRestoreDefaults?: () => void;
  isSaveDisabled?: boolean;
}

export const SettingsPanel: React.FC<SettingsPanelProps> = ({
  title,
  children,
  onSave,
  onCancel,
  onRestoreDefaults,
  isSaveDisabled,
}) => {
  return (
    <div className='flex flex-col w-full h-full'>
      <div className='flex-1 px-5 mb-4 overflow-y-auto'>
        {title && (
          <div className='my-2 text-base font-medium text-gray-800'>
            {title}
          </div>
        )}
        {children}
      </div>
      <div className='flex justify-between w-full p-4 border-t border-gray-300'>
        {onRestoreDefaults ? (
          <Button onClick={onRestoreDefaults}>恢复默认设置</Button>
        ) : (
          <div />
        )}
        <Space>
          {
            <Button
              type='primary'
              disabled={isSaveDisabled}
              onClick={onSave}
            >
              确定
            </Button>
          }
          {<Button onClick={onCancel}>取消</Button>}
        </Space>
      </div>
    </div>
  );
};
